<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>粘性定位</title>
    <!--
        粘性定位就是相对定位和固定定位的结合:元素在跨越特定位偏移之前为相对定位，之后为固定定位。
        粘性定位的参照对象是离它最近的一个拥有滚动机制的祖先元素
        1.以浏览器的可视窗口为参照点移动元素（固定定位特点)
        2.粘性定位占有原先的位置（相对定位特点）
        3.必须添加 top 、left、right、bottom 其中一个才有效
        4.如果粘性位置高度就大于目前所在位置,他就会直接移动到那个位置并占用空间
        5.如果粘性位置高度小于目前所在位置,他会等滚动条移动至粘性位置时黏住
        6.当a的父容器超出滚动所在范围之后就不粘了
    -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }


        .top {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: orange;
        }

        .content {
            height: 2300px;
            background-color: gray;


        }

        .A_top, .B_top, .C_top {
            height: 50px;
            background-color: aqua;
            position: sticky;
            top: 0;
        }

        .A_content, .B_content, .C_content {
            height: 50px;
            background-color: gold;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="top">顶部区域</div>
<div class="content">
    <div class="A">
        <div class="A_top">A</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
        <div class="A_content">A1</div>
    </div>
    <div class="B">
        <div class="B_top">B</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
        <div class="B_content">B1</div>
    </div>
    <div class="C">
        <div class="C_top">C</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
        <div class="C_content">C1</div>
    </div>
</div>
</body>
</html>
